<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="举报详情"> 举报详细信息 </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard" size="small" :segmented="{ content: true }">
      <n-descriptions label-placement="left" class="py-2">
        <n-descriptions-item>
          <template #label>举报ID</template>
          {{ report.reportID }}
        </n-descriptions-item>
        <n-descriptions-item label="举报类型">
          <n-tag type="info">{{ getReportTypeText(report.reportType) }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="举报人ID">{{ report.reporterID }}</n-descriptions-item>
        <n-descriptions-item label="被举报人ID">{{ report.reporteeID }}</n-descriptions-item>
        <n-descriptions-item label="提交时间">{{ formatDate(report.submissionTime) }}</n-descriptions-item>
        <n-descriptions-item v-if="report.handlingTime" label="处理时间">{{ formatDate(report.handlingTime) }}</n-descriptions-item>
        <n-descriptions-item label="状态">
          <n-tag :type="getStatusType(report.reportStatus)">{{ getStatusText(report.reportStatus) }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item v-if="report.handlingResult" label="处理结果">
          {{ report.handlingResult }}
        </n-descriptions-item>
      </n-descriptions>
      
      <n-divider />
      
      <div class="report-content">
        <h3>举报原因</h3>
        <div class="content-box">{{ report.reportReason }}</div>
      </div>
      
      <n-divider />
      
      <div class="action-buttons" v-if="report.reportStatus === 'pending'">
        <n-space>
          <n-button type="success" @click="handleProcess">处理举报</n-button>
        </n-space>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { ReportRecordApi } from '@/api/ReportRecordApi';

const route = useRoute();
const router = useRouter();
const message = useMessage();

// 举报记录数据
const report = ref({
  reportID: 0,
  reporterID: 0,
  reporteeID: 0,
  reportType: '',
  reportReason: '',
  handlingResult: '',
  submissionTime: '',
  handlingTime: '',
  reportStatus: 'pending'
});

// 获取举报类型文本
function getReportTypeText(type) {
  const typeMap = {
    article: '文章',
    item: '物品'
  };
  return typeMap[type] || type;
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    pending: '待处理',
    handled: '已处理'
  };
  return statusMap[status] || status;
}

// 获取状态类型
function getStatusType(status) {
  const statusTypeMap = {
    pending: 'warning',
    handled: 'success'
  };
  return statusTypeMap[status] || 'default';
}

// 格式化日期
function formatDate(dateStr) {
  if (!dateStr) return '';
  return new Date(dateStr).toLocaleString();
}

// 处理举报
async function handleProcess() {
  try {
    // 更新举报状态为已处理
    await ReportRecordApi.updateReportRecord(report.value.reportID, {
      ...report.value,
      reportStatus: 'handled',
      handlingTime: new Date().toISOString(),
      handlingResult: '管理员已处理'
    });
    message.success('举报已处理');
    report.value.reportStatus = 'handled';
    report.value.handlingTime = new Date().toISOString();
    report.value.handlingResult = '管理员已处理';
  } catch (error) {
    message.error('操作失败: ' + error.message);
  }
}

// 获取举报详情
async function getReportDetail() {
  try {
    const id = Number(route.params.id);
    const data = await ReportRecordApi.getReportRecordById(id);
    report.value = data;
  } catch (error) {
    message.error('获取举报详情失败: ' + error.message);
  }
}

onMounted(() => {
  getReportDetail();
});
</script>

<style lang="less" scoped>
.report-content {
  margin: 16px 0;
  
  .content-box {
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 4px;
    min-height: 100px;
    white-space: pre-wrap;
  }
}

.action-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
</style>
